<template>
	<el-card style="margin-left: 35%;margin-top: 12.5rem;">
		
	<div style="width: 30rem;height: 24rem;">
		<h3 style="text-align: center;">修改头像</h3>
		<el-upload class="avatar-uploader" :auto-upload="false" list-type="picture" :show-file-list="true"
			 :limit="1" :on-change="onChangeFile" :on-remove="onRemoveFile">
			<img v-if="imgUrl" :src="imgUrl" class="avatar" style="height: 20vh;width: 20vh;" />
			<el-icon v-else class="avatar-uploader-icon">
				<h4>点击上传</h4>
			</el-icon>
		</el-upload>
		<div>
			<hr>
			<el-button style="margin-left: 43%; background-color: #E1337F;color: aliceblue;"  @click="save">
				<el-icon><Pointer /></el-icon>提交
			</el-button>
		</div>
		
	</div>
	
	</el-card>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from "vue"
	import {
		$get,
		$postx,
		$postj,
		$postf
	} from '../ajax/index.js'
	import {
		Delete,
		EditPen,
		Loading,
		Plus
	} from '@element-plus/icons-vue'
	import {
		success,
		warning,
		message,
		errors
	} from '../store/alert.js'
	import store from "../store/index.js"
	import {Search,ShoppingCart,Pointer} from '@element-plus/icons-vue'
	const imgUrl = ref(null); //定义单个响应式变量
	const formData = new FormData();
	
	function onChangeFile(file, fileList) {
		console.log("onChangeFile....")
		console.log(fileList) //打印出数组
		const maxSize = 500 * 1024; // 500kb
		if (file.size > maxSize) {
		  errors('文件大小不能超过 500kb');
		  return;
		}
		if (fileList.length > 0) {
			console.log(fileList[0]);
			// fileList[0].raw;  就是文件内容
			imgUrl.value = URL.createObjectURL(fileList[0].raw)
			formData.append("pic", fileList[0].raw)
		}
	}
	function onRemoveFile(file, fileList) {
		imgUrl.value=""
		
		
		}
	function save() {
		if (imgUrl.value == "") {
			error("上传头像为空")
			return
		}
		errors("头像上传")
		$postf("/user/updatePic", formData).then((read) => {
			if(read.data.code==401){
				errors(read.data.msg)
			}else{
				
			}
			success(read.data.msg)
			store.state.user.pic=read.data.data
		})
	}
	
</script>

<style>
</style>